<template>
  <div>
    <div class="wrap" v-loading="loading">
      <div class="content">
        <el-card class="header-card">
          <div class="item">
            <p>用户：{{data.userAccount}}</p>
            <p>计划名称：{{ data.planName }}</p>
            <p>计划单号：{{ data.shippingPlanNo }}</p>
            <p>状态：{{ getPlanStatusStr(data.status) }}</p>
            <p>发货类型：{{ getPlanTypeStr(data.type) }}</p>

            <template v-if="data.type === PLAN_TYPE_FL()">
              <p>
                装柜方式：{{getMakeContainerTypeStr(data.makeContainerType)}}
              </p>
              <p>
                <span v-if="currentFlWarehouse" class="mgr20">国内收货仓库：{{currentFlWarehouse.warehouseName}} </span>
                <span v-if="currentWarehouse">海外收货仓库：{{currentWarehouse.warehouseName}}</span>
              </p>
              <p>运输类型：{{ getTransferName(data.transferType) }}</p>
            </template>
            <template v-else-if="data.type === PLAN_TYPE_MW()">
              <p v-if="currentWarehouse">收件仓库：{{currentWarehouse.warehouseName}}</p>
              <p>
                <span class="mgr20">移仓类型：{{getMWTypeStr(data.moveWarehouseType)}}</span>
                <span>物流单号：{{data.haveLogisticsNo ? '有物流单号' : '无物流单号'}}</span>
              </p>
            </template>
            <p v-if="data.deliverDate">预计发货时间：{{ data.deliverDate }} </p>
            <p>
              <span>制单时间：{{ data.createTime }}</span>
              <span class="mgl20" v-if="data.shippedTime">发货时间：{{data.shippedTime}}</span>
            </p>
            <p>
              <span>货件单数量：{{data.shipmentNum}}</span>
              <span class="mgl20">箱子数量：{{data.boxNum}}</span>
              <span class="mgl20">SKU种数：{{data.skuNum}}</span>
              <span class="mgl20">商品数量：{{data.goodsNum}}</span>
            </p>
          </div>
        </el-card>

        <div v-if="canEditWarehouse">
          <h4>发货信息</h4>
          <el-form ref="form" :model="warehouseForm" label-width="120px" label-suffix=":">
            <template v-if="data.makeContainerType === 1">
              <el-form-item label="国内收货仓库">
                <el-radio-group v-model="warehouseForm.flWarehouseId">
                  <el-radio
                    v-for="item in flWarehouseList"
                    :key="item.id"
                    :label="item.id"
                  >
                    {{item.warehouseName}}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </template>

            <el-form-item label="海外收货仓库">
              <el-radio-group v-model="warehouseForm.warehouseId">
                <el-radio
                  v-for="item in warehouseList"
                  :key="item.id"
                  :label="item.id"
                >
                  {{item.warehouseName}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>


        <h4>费用信息</h4>
        <template v-if="data.type === PLAN_TYPE_FL()">
          <plan-shipment-list1 :shipment-list="shipmentList"></plan-shipment-list1>
        </template>
        <template v-else-if="data.type === PLAN_TYPE_MW()">
          <plan-shipment-list2 :shipment-list="shipmentList"></plan-shipment-list2>
        </template>

        <h4>货件信息</h4>
        <el-table
          border
          :data="shipmentList"
        >
          <el-table-column
            label="货件单号"
            prop="shipmentNo"
            min-width="200"
          ></el-table-column>
          <el-table-column
            label="货件类型"
            prop="type"
            min-width="100"
          >
            <template v-slot="{row}">
              {{getShipmentTypeStr2(row.shipmentType)}}
            </template>
          </el-table-column>
          <el-table-column
            label="箱子数量"
            prop="exBoxNum"
            min-width="100"
          ></el-table-column>
          <el-table-column
            label="SKU种数"
            prop="exSkuNum"
            min-width="100"
          ></el-table-column>
          <el-table-column
            label="商品数量"
            prop="exGoodsNum"
            min-width="100"
          ></el-table-column>
          <el-table-column
            label="报关方式"
            prop="BGMethod"
            min-width="100"
            v-if="data.type === PLAN_TYPE_FL()"
          >
            <template v-slot="{row}">
              {{getShipmentBGMethodStr(row.BGMethod)}}
            </template>
          </el-table-column>
          <el-table-column
            label="货件状态"
            prop="status"
            min-width="100"
          >
            <template v-slot="{row}">
              {{getShipmentStatus2Str(row.status2)}}
            </template>
          </el-table-column>
          <el-table-column
            label="制单时间"
            prop="createTime"
            min-width="150"
          ></el-table-column>
          <el-table-column
            label="操作"
            prop="op"
            min-width="300"
          >
            <template v-slot="{row}">
              <el-button type="view" @click="jumpShipmentInfo(row.id)">查看</el-button>
              <d-l-shipment-box-btn :id="row.id"></d-l-shipment-box-btn>
              <el-button v-if="row.labelOrder && (isOneShippingRole() || isMiddleRole())" @click="jumpLabelOrderInfo(row.labelOrder.id, true)" type="primary" class="mgb10">{{$t('route.labelList')}}</el-button>
              <el-button v-if="row.combinationOrder && (isOneShippingRole() || isMiddleRole())" @click="jumpCombinationInfo(row.combinationOrder.id, true)" type="primary" class="mgb10">{{$t('combination.组装工单')}}</el-button>
              <del-shipment-button :id="row.id" :data="row" @changeRow="getData"></del-shipment-button>
            </template>
          </el-table-column>

        </el-table>
      </div>

    </div>
    <footer-nav>
      <el-button type="primary" @click="editWarehouse" v-if="canEditWarehouse" :loading="editLoading" :disabled="editWarehouseDisable">修改</el-button>
      <el-button @click="goBack" >返回</el-button>
    </footer-nav>
  </div>

</template>

<script>
import {editWarehouse, getShippingPlanInfo} from "@/api/shippingPlan";
import {
  getMWTypeStr,
  getPlanStatusStr,
  getPlanTypeStr,
  MW_TYPE_BC,
  PLAN_TYPE_FL,
  PLAN_TYPE_MW
} from "@/utils/shippingPlan";

import {
  getMakeContainerTypeStr, getShipmentBGMethodStr,
  getShipmentStatus2Str,
  getShipmentStatusStr,
  getShipmentTypeStr, getShipmentTypeStr2
} from "@/utils/shipment";

import shippingPlanDataMixin from "@/views/shippingPlan/mixin/shippingPlanDataMixin";
import FooterNav from "@/components/Common/FooterNav.vue";
import DelShipmentButton from "@/views/shipment/components/DelShipmentButton.vue";
import {jumpCombinationInfo, jumpLabelOrderInfo, jumpShipmentInfo} from "@/utils/jumpView";
import checkPermission from "@/utils/permission";
import {ROLE_FIRST_LEG} from "@/utils/admin";
import {deepCopy} from "@/utils";
import PlanShipmentList2 from "@/views/shippingPlan/components/PlanShipmentList2.vue";
import PlanShipmentList1 from "@/views/shippingPlan/components/PlanShipmentList1.vue";
import {isMiddleRole, isOneShippingRole} from "@/utils/common";
import DLShipmentBoxBtn from "@/views/shipment/components/DLShipmentBoxBtn.vue";

export default {
  name: 'shippingPlanInfo',
  components: {DLShipmentBoxBtn, PlanShipmentList1, PlanShipmentList2, DelShipmentButton, FooterNav},
  mixins: [shippingPlanDataMixin],
  data(){
    return {
      id: 0,
      loading: false,
      data: {}, // 计划数据
      planForm: {
        planId: 0,
        planName: '',
        type: '',
        flWarehouseId: 0,
        warehouseId: 0,
        transferType: '', // 运输类型
        deliverDate: '', // 预计送达时间
        moveWarehouseType: '', // 移仓类型
        containerNo: '', // 货柜号
        haveLogisticsNo: '', // 是否有物流单号
      }, // 表单的数据
      saveLoading: false,
      warehouseForm: {
        warehouseId: 0, // 海外仓
        flWarehouseId: 0, // 国内仓
      }, // 发货信息
      editLoading: false,
    }
  },
  computed: {
    // 海外仓
    currentWarehouse(){
      return this.warehouseList.find(item => item.id === this.data.warehouseId)
    },
    // 国内仓
    currentFlWarehouse(){
      return this.flWarehouseList.find(item => item.id === this.data.flWarehouseId)
    },
    shipmentList(){
      if(!this.data.shipmentList){
        return []
      }
      return this.data.shipmentList
    },
    showEditButton(){
      const arr = [
        'saved', 'ready_to_ship',
      ];
      return arr.includes(this.data.status)
    },
    // 是否能修改仓库 （头程货件 并且是头程运营）
    canEditWarehouse(){
      return this.data && this.data.type === PLAN_TYPE_FL && checkPermission(ROLE_FIRST_LEG) && this.data.status !== 'finished'
    },
    editWarehouseDisable(){
      if(!this.canEditWarehouse){
        return false
      }
      return this.warehouseForm.flWarehouseId === this.data.flWarehouseId && this.warehouseForm.warehouseId === this.data.warehouseId
    }
  },
  created() {
    this.id = this.$route.query.id
    if(!this.id){
      this.$errorMessage('参数缺失')
      this.$router.go(-1)
      return
    }
    this.getData()
  },
  methods: {
    getShipmentTypeStr2,
    getShipmentBGMethodStr,
    getMakeContainerTypeStr,
    isMiddleRole,
    isOneShippingRole,
    jumpCombinationInfo,
    jumpLabelOrderInfo,
    getMWTypeStr,
    PLAN_TYPE_MW() {
      return PLAN_TYPE_MW
    },
    PLAN_TYPE_FL() {
      return PLAN_TYPE_FL
    },
    getShipmentStatus2Str,
    jumpShipmentInfo,
    getShipmentStatusStr,
    getShipmentTypeStr,
    getPlanTypeStr,
    getPlanStatusStr,
    getData(){
      this.loading = true
      getShippingPlanInfo(this.id)
        .then(res=>{
          this.loading = false
          if(res.error === 0){
            this.data = res.data

            this.warehouseForm.warehouseId = this.data.warehouseId
            this.warehouseForm.flWarehouseId = this.data.flWarehouseId
            this.setPlanForm()
          }else{
            this.$eMsg(res.message)
            if(res.error === 404){
              this.$router.push({
                name: 'shippingPlanList',
              })
            }
          }
        })
    },
    setPlanForm(){
      this.planForm.planId = this.data.id
      for (let planFormKey in this.planForm) {
        if(this.data[planFormKey]){
          this.planForm[planFormKey] = this.data[planFormKey]
        }
      }
    },
    goBack(){
      this.$router.go(-1)
    },
    addMoreShipment(){
      this.$router.push({
        name: 'addShipment',
        params: this.planForm
      })
    },
    downloadShipmentBox(row){
      console.log(row)
    },
    getSummaries(param){
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = this.$t('table.sum');
          return;
        }
        if(index === 1){
          sums[index] = '-'
          return;
        }

        sums[index] = data.reduce((prev,curr)=>{
          if(curr[column.property]){
            return prev  + Number(curr[column.property])
          }else{
            return prev
          }
        },0)
      });

      return sums;
    },
    // 修改仓库
    editWarehouse(){
      this.editLoading = true
      const data = deepCopy(this.warehouseForm)
      data.id = this.data.id
      editWarehouse(data)
        .then(res=>{
          this.editLoading = false
          this.$successMessage(res.message)
          this.getData()
        })
    }
  },
}


</script>

<style scoped lang="scss">
.wrap{
  padding: 20px 30px;
  .header-card{
    font-size: 14px;
    background-color: rgba(242, 242, 242, 1);
    p{
      margin: 10px 0;
      padding: 0;
    }
    .font-bold{
      font-weight: bold;
    }
    .true-number{
      color: #FF0000;
      font-weight: 600;
    }
  }
}
</style>
